<template>
  <div :id="playerData.id"></div>
</template>

<script>
import 'xgplayer'
import HlsJsPlayer from 'xgplayer-hls.js'

export default {
  name: 'HlsPlayer',
  props: {
    playerData: {
      type: Object,
      default: () => ({
        id: 'player',
        hlsFlow: ''
      })
    }
  },
  data: () => ({
    player: null
  }),
  methods: {
    init (id, url) {
      if (this.player) this.player.destroy()
      this.player = new HlsJsPlayer({
        id,
        url,
        width: '100%',
        height: '100%',
        hasAudio: false, // 禁用音频
        autoplay: true, // 自动播放
        autoplayMuted: true, // 需加这个属性才能自动播放
        isLive: true,
        controls: false, // 不显示底下控制条
        lang: 'zh-cn'
      })
      this.player.on('pause', () => {
        // 禁止暂停
        this.player.play()
      })
      this.player.once('destroy', () => { console.log('destroy') })
    }
  },
  mounted () {
    this.init(this.playerData.id, this.playerData.hlsFlow)
  },
  beforeDestroy () {
    this.player.destroy(true)
  }
}
</script>

<style scoped lang="scss"></style>
